<template>
  <div class="tabs">
    <el-tag v-for="(tag, index) in tags" :key="tag.name" :closable="tag.name !== 'home'"
      :effect="route.name === tag.name ? 'dark' : 'plain'" @click="handleMenu(tag)" @close="handleClose(tag, index)">
      {{ tag.label }}
    </el-tag>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useAllDataStore } from '../stores/index'
const store = useAllDataStore()
const tags = computed(() => store.state.tags)
const route = useRoute()
const router = useRouter()
//面包屑跳转 handleMenu
const handleMenu = (tag) => {
  router.push(tag.name)
  store.selectMenu(tag)
}
// 关闭面包屑导航
const handleClose = (tag, index) => {
  // 通过pinia管理
  store.undateTags(tag)
  // 如果点击的关闭的tag 不是对应的当前页面
  if (tag.name !== route.name) return
  if (index === store.state.tags.length) {
    store.selectMenu(tags.value[index - 1])
    router.push(tags.value[index - 1].name)
  } else {
    store.selectMenu(tags.value[index])
    router.push(tags.value[index].name)
  }
}
</script>

<style lang="less" scoped>
.tabs {
  margin-top: 20px;
  margin-left: 20px;

  .el-tag {
    font-size: 16px;
    margin-right: 20px;
  }
}
</style>
